<template>
	<view class="free-panel-title">
		<view class="item_box left" id="left">
			<view class="item" v-for="(item,index) in list_left" :key="index">
				<view class="item-content">
					<image :src="item.squareImage" mode="widthFix" lazy-load="true" class="img"></image>
					<view class="title">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="item_box right" id="right">
			<view class="item" v-for="(item,index) in list_right" :key="index">
				<view class="item-content">
					<image :src="item.squareImage" mode="widthFix" class="img"></image>
					<view class="title">{{item.title}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
	    props:['list'],
		data() {
			return {				
				list_right:[],
				list_left:[],
				right_height:0,
				left_height:0,
			}
		},
		watch:{
			list(newVal,oldVal){
				if(newVal!=oldVal){
					this.randerData()
				}
			}
		},
		methods: {
			/* 上拉触底事件 */
			async  randerData() {
				let _ = this;
				let list = this.list;
				let leftList  = this.list_left
				let rightList = this.list_right
				// list.map((obj,idx)=>{
				for (const item of list) {
					let leftHeight = this.left_height;
					let rightHeight = this.right_height;
					leftHeight <= rightHeight ? leftList.push(item) : rightList.push(item);
					await this.getBoxHeight(leftList, rightList);
				}
			},
			/*下拉刷新*/
			refreshList(){
				this.list_right=[];
				this.list_left=[];
			},
			getBoxHeight(list_left, list_right) { //获取左右两边高度
				let _ = this;
			    return new Promise((resolve, reject) => {
				  this.list_left = list_left
				  this.list_right = list_right
				  this.$nextTick(function(){
					var query = uni.createSelectorQuery().in(this);
				  	query.select('#left').boundingClientRect();
				  	query.select('#right').boundingClientRect();
				  	query.exec((res) => {
						console.log(res)
						if (res[0] ){
						  this.left_height = res[0].height; //获取左边列表的高度
						  this.right_height = res[1].height; //获取右边列表的高度
						}
						resolve(res);
				  	});
				  })
			    })
			}
		}
	}
</script>

<style lang="less" scoped>
.free-panel-title{
	padding: 16rpx;
	background: #F8F8F8;
	min-height: 100vh;
	overflow: hidden;
}
.left{
	width: 48%;
	float: left;
}
.right{
	width: 48%;
	float: right;
}
.item{
	box-sizing: border-box;
	.item-content{
		width: 100%;
		border-radius: 8px;
		margin-bottom: 12rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		overflow: hidden;
		border: 1px solid #ffaaff;
		padding: 4upx;
        .img{
			width: 100%;
		}
	}
}
</style>

